<template>
  <div class="app-container">
    <search-form
      v-show="showSearch"
      :data="queryParams"
      :field-list="filterInfo.fieldList"
      :list-type-info="filterInfo.dictList"
      @handleSearch="handleQuery"
      @handleReset="resetQuery"
    />
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"

          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:notice:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:notice:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:notice:remove']"
        >删除
        </el-button>
      </el-col>
<!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
    </el-row>

    <hk-table
      :loading="loading"
      :tableData="noticeList"
      :tableColumns="tableFieldList"
      :total="total"
      :selection="true"
      :showPag="true"
      :operate="true"
      :queryParams="queryParams"
      :commonFixed="true"
      @changePage="changePage"
      @handleSelectionChange="handleSelectionChange"
    >
      <!--   公告类型   -->
      <template #noticeType="scope">
        <span
          class="Inspan"
          :class="
            scope.row.noticeType == '0'
              ? 'simple':'big'
          "
        >{{ scope.row.noticeType == '0' ? '通知' : '公告' }}</span
        >
      </template>
      <!--    公告状态  -->
      <template #status="scope">
        <span
          class="Inspan"
          :class="
             scope.row.status == '0'
              ? 'major':'serious'
          "
        >{{ scope.row.status == '0' ? '正常' : '关闭' }}</span
        >
      </template>
      <!--   操作   -->
      <template #operate="scope">
        <el-button
          size="mini"
          type="text"
          @click="handleUpdate(scope.row)"
          v-hasPermi="['system:notice:edit']"
        >修改
        </el-button>
        <el-button
          size="mini"
          type="text"
          @click="handleDelete(scope.row)"
          v-hasPermi="['system:notice:remove']"
        >删除
        </el-button>
      </template>
    </hk-table>

    <!-- 添加或修改公告对话框 -->
    <edit-dialog ref="editDialogRef" :title="title" :form-data="form"
                 :noticeTypeList="filterInfo.dictList.noticeTypeList"
                 :statusList="filterInfo.dictList.statusList" @submitForm="submitForm"
    />
  </div>
</template>

<script>
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from '@/api/system/notice'
import SearchForm from '@/components/HKSearchform/index.vue'
import HkTable from '@/components/HKTable'
import editDialog from '@/views/system/notice/coms/editDialog'

export default {
  name: 'Notice',
  components: { SearchForm, HkTable, editDialog },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 公告表格数据
      noticeList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        noticeTitle: undefined,
        createBy: undefined,
        noticeType: undefined
      },
      // 搜索项配置
      filterInfo: {
        fieldList: [
          { label: '公告标题', type: 'input', field: 'noticeTitle' },
          { label: '操作人员', type: 'input', field: 'createBy' },
          { label: '类型', type: 'select', field: 'noticeType', list: 'noticeTypeList' }
        ],
        dictList: {
          noticeTypeList: [{ label: '通知', value: '0' }, { label: '公告', value: '1' }],
          statusList: [{ label: '正常', value: '0' }, { label: '关闭', value: '1' }]
        }
      },
      // 表单参数
      form: {},

      //  表格配置项
      tableFieldList: [
        { label: '公告编号', param: 'id' },
        { label: '公告标题', param: 'noticeTitle' },
        { label: '公告类型', param: 'noticeType', type: 'slot' },
        { label: '状态', param: 'status', type: 'slot' },
        { label: '创建者', param: 'createBy' },
        { label: '创建时间', param: 'createDate' }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 分页 */
    changePage(data) {
      this.queryParams.current = data.current
      this.queryParams.size = data.size
      this.getList()
    },
    /** 查询公告列表 */
    getList() {
      this.loading = true
      listNotice(this.queryParams).then(response => {
        this.noticeList = response.list
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery(data) {
      if (data) {
        this.queryParams.noticeTitle = data.noticeTitle
        this.queryParams.createBy = data.createBy
        this.queryParams.noticeType = data.noticeType
      } else {
        this.queryParams = {
          size: 10,
          current: 1
        }
      }
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery(data) {
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$refs.editDialogRef.show()
      this.title = '添加公告'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      const noticeId = row.id || this.ids
      getNotice(noticeId).then(response => {
        this.form = response
        this.$refs.editDialogRef.show()
        this.title = '修改公告'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.getList()
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const noticeIds = row.id || this.ids
      this.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {
        return delNotice(noticeIds)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    }
  }
}
</script>
